<template>
  <div class="table-container" ref="tableContainerRef" :style="containerStyleVar" :class="{ 'table-container__full-screen': isFullscreen }">
    <div class="table-toolbar">
      <!--顶部左侧区域-->
      <div class="table-toolbar-left">
        <template v-if="title">
          <div class="table-toolbar-left-title">
            {{ title }}
            <n-tooltip trigger="hover" v-if="titleTooltips">
              <template #trigger>
                <n-icon size="18" class="table-tool-tips-icon">
                  <QuestionCircleOutlined />
                </n-icon>
              </template>
              {{ titleTooltips }}
            </n-tooltip>
          </div>
        </template>
        <slot name="title"></slot>
      </div>
      <!--顶部右侧区域-->
      <div class="table-toolbar-right">
        <!--斑马纹-->
        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="table-toolbar-right-icon">
              <n-switch v-model:value="tableProps.striped" />
            </div>
          </template>
          <span>表格斑马纹</span>
        </n-tooltip>
        <n-divider vertical />
        <!--顶部右侧区域-->
        <slot name="toolbar"></slot>
        <!--刷新-->
        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="table-toolbar-right-icon" @click="reload">
              <n-icon size="18">
                <ReloadOutlined />
              </n-icon>
            </div>
          </template>
          <span>刷新</span>
        </n-tooltip>
        <!--密度-->
        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="table-toolbar-right-icon">
              <n-dropdown @select="densitySelect" trigger="click" :options="densityOptions" :value="tableProps.size">
                <n-icon size="18">
                  <ColumnHeightOutlined />
                </n-icon>
              </n-dropdown>
            </div>
          </template>
          <span>密度</span>
        </n-tooltip>
        <!--表格设置单独抽离成组件-->
        <!-- <ColumnSettings :table-columns="tableColumns" @change="onChangeColSet" /> -->
        <!--全屏-->
        <n-tooltip trigger="hover">
          <template #trigger>
            <div class="table-toolbar-right-icon" @click="fullScreen">
              <n-icon size="18">
                <component :is="isFullscreen ? FullscreenExitOutlined : FullscreenOutlined" />
              </n-icon>
            </div>
          </template>
          <span>全屏</span>
        </n-tooltip>
      </div>
    </div>
    <div class="table-main">
      <n-data-table ref="tableElRef" v-bind="tableProps" :style="{ height: tableHeight }">
        <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
          <slot :name="item" v-bind="data"></slot>
        </template>
      </n-data-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watchEffect } from 'vue';
import type { DataTableProps, DataTableInst } from 'naive-ui';
import { ReloadOutlined, ColumnHeightOutlined, QuestionCircleOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@vicons/antd';
// import ColumnSettings from './ColumnSettings.vue';
import { useFullscreen } from '@vueuse/core';
import { useThemeInfoStore } from '@yanfan/admin-layout';

defineOptions({
  name: 'DataTable',
  inheritAttrs: false,
});

//naive-ui中的DataTable组件的Props
interface NDataTableProps {
  allowCheckingNotLoaded?: boolean;
  bordered?: boolean;
  bottomBordered?: boolean;
  checkedRowKeys?: DataTableProps['checkedRowKeys'];
  cascade?: boolean;
  childrenKey?: DataTableProps['childrenKey'];
  columns?: DataTableProps['columns'];
  data?: DataTableProps['data'];
  defaultCheckedRowKeys?: DataTableProps['defaultCheckedRowKeys'];
  defaultExpandedRowKeys?: DataTableProps['defaultExpandedRowKeys'];
  defaultExpandAll?: boolean;
  expandedRowKeys?: DataTableProps['expandedRowKeys'];
  filterIconPopoverProps?: DataTableProps['filterIconPopoverProps'];
  flexHeight?: boolean;
  headerHeight?: DataTableProps['headerHeight'];
  heightForRow?: DataTableProps['heightForRow'];
  indent?: DataTableProps['indent'];
  loading?: boolean;
  maxHeight?: DataTableProps['maxHeight'];
  minHeight?: DataTableProps['minHeight'];
  minRowHeight?: DataTableProps['minRowHeight'];
  paginateSinglePage?: boolean;
  pagination?: DataTableProps['pagination'];
  paginationBehaviorOnFilter?: DataTableProps['paginationBehaviorOnFilter'];
  remote?: boolean;
  renderCell?: DataTableProps['renderCell'];
  renderExpandIcon?: DataTableProps['renderExpandIcon'];
  rowClassName?: DataTableProps['rowClassName'];
  rowKey?: DataTableProps['rowKey'];
  rowProps?: DataTableProps['rowProps'];
  scrollX?: DataTableProps['scrollX'];
  scrollbarProps?: DataTableProps['scrollbarProps'];
  singleColumn?: boolean;
  singleLine?: boolean;
  size?: DataTableProps['size'];
  spinProps?: DataTableProps['spinProps'];
  stickyExpandedRows?: boolean;
  striped?: boolean;
  summary?: DataTableProps['summary'];
  summaryPlacement?: DataTableProps['summaryPlacement'];
  tableLayout?: DataTableProps['tableLayout'];
  virtualScroll?: boolean;
  virtualScrollHeader?: boolean;
  virtualScrollX?: boolean;
  onLoad?: DataTableProps['onLoad'];
  onScroll?: DataTableProps['onScroll'];
  onUpdateCheckedRowKeys?: DataTableProps['onUpdateCheckedRowKeys'];
  'onUpdate:checkedRowKeys'?: DataTableProps['onUpdate:checkedRowKeys'];
  onUpdateExpandedRowKeys?: DataTableProps['onUpdateExpandedRowKeys'];
  'onUpdate:expandedRowKeys'?: DataTableProps['onUpdate:expandedRowKeys'];
  onUpdateFilters?: DataTableProps['onUpdateFilters'];
  'onUpdate:filters'?: DataTableProps['onUpdate:filters'];
  onUpdatePage?: DataTableProps['onUpdatePage'];
  'onUpdate:page'?: DataTableProps['onUpdate:page'];
  onUpdatePageSize?: DataTableProps['onUpdatePageSize'];
  'onUpdate:pageSize'?: DataTableProps['onUpdate:pageSize'];
  onUpdateSorter?: DataTableProps['onUpdateSorter'];
  'onUpdate:sorter'?: DataTableProps['onUpdate:sorter'];
}

interface IDataTableProps extends NDataTableProps {
  title?: string;
  titleTooltips?: string;
  tableHeight?: string;
}

const props = withDefaults(defineProps<IDataTableProps>(), {
  allowCheckingNotLoaded: false,
  bordered: true,
  bottomBordered: true,
  checkedRowKeys: undefined,
  cascade: true,
  childrenKey: 'children',
  columns: () => [],
  data: () => [],
  defaultCheckedRowKeys: () => [],
  defaultExpandedRowKeys: () => [],
  defaultExpandAll: false,
  expandedRowKeys: undefined,
  filterIconPopoverProps: () => ({ trigger: 'click', placement: 'bottom' }),
  flexHeight: true,
  headerHeight: 28,
  heightForRow: undefined,
  indent: 16,
  loading: false,
  maxHeight: undefined,
  minHeight: undefined,
  minRowHeight: 28,
  paginateSinglePage: true,
  pagination: false,
  paginationBehaviorOnFilter: 'current',
  remote: false,
  renderCell: undefined,
  renderExpandIcon: undefined,
  rowClassName: undefined,
  rowKey: undefined,
  rowProps: undefined,
  scrollX: undefined,
  scrollbarProps: undefined,
  singleColumn: false,
  singleLine: true,
  size: 'medium',
  spinProps: undefined,
  stickyExpandedRows: false,
  striped: false,
  summary: undefined,
  summaryPlacement: 'bottom',
  tableLayout: 'auto',
  virtualScroll: false,
  virtualScrollHeader: false,
  virtualScrollX: false,
  onLoad: undefined,
  onScroll: undefined,
  onUpdateCheckedRowKeys: undefined,
  'onUpdate:checkedRowKeys': undefined,
  onUpdateExpandedRowKeys: undefined,
  'onUpdate:expandedRowKeys': undefined,
  onUpdateFilters: undefined,
  'onUpdate:filters': undefined,
  onUpdatePage: undefined,
  'onUpdate:page': undefined,
  onUpdatePageSize: undefined,
  'onUpdate:pageSize': undefined,
  onUpdateSorter: undefined,
  'onUpdate:sorter': undefined,
  title: undefined,
  titleTooltips: undefined,
  tableHeight: '100%',
});

const emits = defineEmits<{
  (e: 'reload'): void;
}>();

const themeStore = useThemeInfoStore();
const containerStyleVar = computed(() => {
  const { primaryColor, primaryColorHover, primaryColorPressed, primaryColorSuppl } = themeStore.themeInfo;

  return {
    '--primary-color': primaryColor,
    '--primary-color-hover': primaryColorHover,
    '--primary-color-pressed': primaryColorPressed,
    '--primary-color-suppl': primaryColorSuppl,
  };
});

const tableContainerRef = ref<HTMLDivElement | null>(null);
const { toggle, isFullscreen } = useFullscreen(tableContainerRef);
const tableElRef = ref<DataTableInst | null>(null);
const tableProps = ref<NDataTableProps>({});

const densityOptions = [
  {
    type: 'menu',
    label: '紧凑',
    key: 'small',
  },
  {
    type: 'menu',
    label: '默认',
    key: 'medium',
  },
  {
    type: 'menu',
    label: '宽松',
    key: 'large',
  },
];

watchEffect(() => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { title, titleTooltips, tableHeight, ...attrs } = props;
  tableProps.value = attrs;
});

//刷新
function reload() {
  emits('reload');
}
//密度选择
function densitySelect(value: DataTableProps['size']) {
  tableProps.value.size = value;
}
//全屏
function fullScreen() {
  toggle();
}
</script>
<style lang="scss" scoped>
.table-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  &__full-screen {
    background-color: #fff;
    padding: 20px 24px;
  }
  .table-toolbar {
    display: flex;
    justify-content: space-between;

    .table-toolbar-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      flex: 1;

      .table-toolbar-left-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 16px;
        font-weight: 600;
        .table-tool-tips-icon {
          margin-left: 4px;
          color: #9ca3af;
          cursor: pointer;
        }
      }
    }

    .table-toolbar-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      flex: 1;

      .table-toolbar-right-icon {
        font-size: 16px;
        cursor: pointer;
        display: flex;
        :hover {
          color: var(--primary-color-hover);
        }
      }
    }
  }
  .table-main {
    flex: 1;
    min-height: 0;
  }
}
</style>
